<template>
  <div style="min-height: 100vh; background-color: #fff">
    <div class="btn" @click="showStorePoster = true">shareStore</div>
    <div class="btn" @click="handleShareProd">shareProd</div>
    <div class="btn" @click="handleShareBrand">shareBrand</div>
    <posterStore
      v-if="showStorePoster"
      @hideStorePosterPopupV2="hideStorePosterPopup"
    />
    <shareProduct ref="shareProduct" :shareObj="shareObj" />
    <shareProductV2 ref="shareProductV2" :shareObj="shareObj" />
    <shareBrand ref="shareBrand" :shareObj="shareBrandObj" />
  </div>
</template>

<script>
import posterStore from '@/components/poster/posterStore';
import shareProduct from '@/components/poster/shareProduct';
import shareProductV2 from '@/components/poster/shareProductV2';
import shareBrand from '@/components/poster/shareBrand';
import { brandShareInfo, productShareInfo } from './json/dataInfo';
import { http2https } from '@/utils/util';
export default {
  name: 'index2',
  components: {
    posterStore,
    shareProduct,
    shareProductV2,
    shareBrand
  },
  data() {
    return {
      showStorePoster: false,
      shareObj: {},
      shareBrandObj: {}
    };
  },
  methods: {
    hideStorePosterPopup() {
      this.showStorePoster = false;
    },
    handleShareProd() {
      this.shareObj = productShareInfo.data;
      if (this.shareObj.shareFloorImgUrl) {
        this.$refs.shareProductV2.isShow = true;
      } else {
        this.$refs.shareProduct.isShow = true;
      }
    },
    handleShareBrand() {
      const bannerList = [
        'https://akim-oss.aikucun.com/merchant-platform/356a192b7913b04c54574d18c28d46e6395428ab_1631603901689_43.jpg',
        'https://akim-oss.aikucun.com/merchant-platform/da4b9237bacccdf19c0760cab7aec4a8359010b0_1631603901684_83.jpg',
        'https://akim-oss.aikucun.com/merchant-platform/77de68daecd823babbb58edb1c8e14d7106e83bb_1631603901842_87.jpg',
        'https://akim-oss.aikucun.com/merchant-platform/17ba0791499db908433b80f37c5fbc89b870084b_1631603902593_69.jpg',
        'https://akim-oss.aikucun.com/merchant-platform/209457c921ce50b6f11deae9303fbd6ad96dcd97_1631603902354_86.jpg',
        'https://akim-oss.aikucun.com/merchant-platform/a1adb53cb6b5f044ea6f4f83e329b4ab8cbbb581_1631603901568_44.jpg'
      ];
      let banner = [];
      if (typeof bannerList === 'string') {
        banner = bannerList
          .split(',')
          .slice(0, 3)
          .map(i => http2https(i));
      } else if (Array.isArray(bannerList)) {
        banner = bannerList.slice(0, 3).map(i => http2https(i));
      }
      this.shareBrandObj = { ...brandShareInfo.data, banner };
      this.$refs.shareBrand.isShow = true;
    }
  }
};
</script>

<style scoped>
.btn {
  width: 200px;
  height: 60px;
  background-color: #f5a7a7;
  color: white;
  font-size: 14px;
  margin: 0 auto 10px;
}
</style>
